<template>
  <div>
    <page-list :x-uri="uri" :checkbox-item="false" :doactions="doactions">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs :course-id="courseId" />
        <page-header :content="headerTitle" />
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button size="mini" type="primary" @click="visible = true">新增课件</el-button>
      </template>
    </page-list>
    <el-dialog v-if="visible" title="上传课件" :visible.sync="visible" width="800px" :close-on-click-modal="false">
      <el-form :model="courseware" size="small">
        <el-form-item label="">
          <!-- 上传 -->
          <!--课件，学员可下载;允许文件类型：word、excel、PPT、TXT、PDF、zip、tar-->
          <edu-upload
            field="attach_id"
            :value.sync="courseware.attach_id"
            :args="uploadArgs"
          />
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="end">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" :disabled="disableSubmit" @click="onSubmit">保存</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import PageList from '@public/template/page_list.vue';
import EduUpload from '@public/form/upload.vue';

import Tabs from './tabs';
import PageHeader from '@/components/page-header';

export default {
  components: {
    PageList,
    Tabs,
    EduUpload,
    PageHeader
  },
  inject: ['reload'],
  data() {
    return {
      headerTitle: '课件',
      uri: '/course/admin/courseware/' + this.$route.params.id + '/list',
      doactions: [{ title: '删除', callback: this.delete }],
      // 课件数据
      courseware: {
        attach_id: []
      },
      // 课件上传弹出层显隐性
      visible: false,
      // 禁用提交按钮
      disableSubmit: false,
      // 上传参数
      uploadArgs: {
        upload_type: 'drag',
        limit: 20,
        accept: 'application/x-zip-compressed,' + // zip
            'application/x-rar-compressed,' + // rar
            'application/vnd.ms-excel,' + // xls
            'application/msword,' + // doc dot
            'text/plain,' + // txt
            'application/pdf,' + // pdf
            'application/vnd.ms-powerpoint,' + // ppt
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,' + // xlsx
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document,' + // docx
            'application/vnd.openxmlformats-officedocument.presentationml.presentation,' + // pptx
            'application/vnd.openxmlformats-officedocument.wordprocessingml.template' // dotx
      }
    };
  },
  computed: {
    courseId() {
      return this.$route.params.id;
    }
  },
  methods: {
    delete({ row }) {
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/course/admin/courseware/' + row.course_id + '/' + row.id + '/delete',
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    // 提交
    onSubmit() {
      this.disableSubmit = true
      this.$http.post('/course/admin/courseware/' + this.courseId + '/create', this.courseware, _ => {
        this.disableSubmit = false
        this.reload()
      }, error => {
        this.$message.error(error.msg);
        this.disableSubmit = false
      })
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep{
  .edu-form-upload{
    max-width: 800px;
  }
  .upload-container{
   text-align: center;
    .el-upload-dragger{
      width: 742px;
    }
  }
}
</style>
